<template>
  <view style="width: 100%; height: 80%; overflow-y: hidden">
    <earth3d></earth3d>
  </view>
  <view class="">
  	
  </view>
  <view class="search-bar" style="background-color: #ecf1f4; height: 20%;">
    <view class="search-bar-box">
     <!-- <image class="search-span" src="../../static/image/searchSpan.png" /> -->
      <input
        type="text"
        v-model="location"
        placeholder="请输入目的地"
        class="search-text"
        maxlength="10"
      />
      <button class="search-btn" @click="search">出发</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import earth3d from './component/earth3d.vue';

const location=ref()
const search=()=>{
	
	// request({
		
	// })
	
	uni.navigateTo({
		url:`/pages/postList/postList?location=${location.value}`
	})
	
}
</script>

<style>
	.search-bar {
		width: 100%;
		height: 100rpx;
	}

	.search-bar-box {
		display: flex;
		margin: 0 auto;
		width: 620rpx;
		height: 100rpx;
		border: 2px solid #00a8cc;
		border-radius: 50px;
	}

	.search-span {
		width: 100rpx;
		height: 100rpx;
		margin-top: 6rpx;
		margin-left: 30rpx;
	}

	.search-text {
		width: 100%;
		height: 100%;
		padding-left: 10px;
		margin-left: 20rpx;
		font-size: 18px;
		color: #7f7f81;
	}

	.search-btn {
		background-color: #00a8cc;

		color: white;
		text-align: center;
		display: inline-block;
		font-size: 35rpx;
		width: 240rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom-right-radius: 45px;
		border-top-right-radius: 45px;
		border-bottom-left-radius: 0rpx;
		border-top-left-radius: 0rpx;
		letter-spacing: 3rpx;
	}
</style>